<script setup>
//导入响应式函数
import {ref} from 'vue'
//定义响应式数据:json数组
const stuList = ref([
  {id: 9001, name: 'jack',address:'四川成都'},
  {id: 7002, name: 'rose', address: '四川雅安'},
  {id: 9003, name: 'tony', address: '四川广安'},
])

</script>

<template>
      <table width="100%" border="1">
        <tr>
          <td>学号</td>
          <td>姓名</td>
          <td>地址</td>
        </tr>
  <!-- stu对每一个遍历的对象进行了暂存        -->
        <tr v-for="stu in stuList">
          <td>{{stu.id}}</td>
          <td>{{stu.name}}</td>
          <td>{{stu.address}}</td>
        </tr>
      </table>
  <table width="100%" border="1">
    <tr>
      <td>序号</td>
      <td>学号</td>
      <td>姓名</td>
      <td>地址</td>
    </tr>
    <!-- stu对每一个遍历的对象进行了暂存        -->
    <tr v-for="(stu,index) in stuList">
      <td>{{index+1}}</td>
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.address}}</td>
    </tr>
  </table>
</template>

<style scoped>

</style>